<template>
  <div class="console-recharge">
    <div v-if="listOrEdit == 'list'">
      <el-row>
        <el-select v-model="link" style="width: 15%;margin-right: 1%;" placeholder="请选择站点">
          <el-option v-for="item in linkOption" :key="item.site_id" :label="item.name"
            :value="item.site_id">
          </el-option>
        </el-select>
        <el-select v-model="taskId" style="width: 15%;margin-right: 1%;" placeholder="请选择任务">
          <el-option v-for="item in taskOption" :key="item.task_id" :label="item.name"
            :value="item.task_id">
          </el-option>
        </el-select>
        <el-input type="text" style="width: 15%;margin-right: 1%;" v-model="search" placeholder="请输入标题" />
        <el-button type="primary">查询</el-button>
      </el-row>
      <div style="margin-top: 1%;">
        <el-table :data="tableData"
          v-loading="loading" style="width: 100%"
          @selection-change="handleSelectionChange"
          :cell-style="{'height': '40px','padding': '8px 0'}"
          :header-cell-style="{'background-color': '#eef1ff','color': '#2c2c2c','border-radius': '10px'}"
          >
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column align="center" label="关联账号">
            <template slot-scope="scope">
              <div>{{ scope.row.site && scope.row.site.name ? scope.row.site.name : '' }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="标题">
          </el-table-column>
          <el-table-column align="center" prop="source_url" label="来源" />
          <el-table-column align="center" prop="create_time" label="时间">
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="editArticle(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagenation">
        <el-pagination :current-page="pageInfo.current" :page-sizes="[15, 30, 45, 60]" :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <div v-if="listOrEdit == 'edit'">
      <el-button @click="listOrEdit = 'list';ruleForm.ai_title = ''">返回</el-button>
      <el-divider></el-divider>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="ruleForm.ai_title" placeholder="关键词（必填）" clearable></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="html_content">
          <Tinymce v-model="ruleForm.html_content" :aiTitle="ruleForm.ai_title" v-loading="oneCropping_loading"  element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"></Tinymce>
        </el-form-item>
        <el-form-item label="图片裁剪">
           <div class="cropping_images">
              <span>上：</span><el-input class="cropping_images_input" type="number" v-model="ruleForm.cropping_images_top" placeholder="上" clearable></el-input>
              <span>下：</span><el-input class="cropping_images_input" type="number" v-model="ruleForm.cropping_images_bottom" placeholder="下" clearable></el-input>
              <span>左：</span><el-input class="cropping_images_input" type="number" v-model="ruleForm.cropping_images_left" placeholder="左" clearable></el-input>
              <span>右：</span><el-input class="cropping_images_input" type="number" v-model="ruleForm.cropping_images_right" placeholder="右" clearable></el-input>
              <span>（单位：像素或百分比）</span>
              <el-button :loading="oneCropping_loading" @click="oneCropping">一键裁剪</el-button>
           </div>
        </el-form-item>
        <el-form-item label="文章来源" prop="source_url">
          <el-input v-model="ruleForm.source_url" placeholder="文章来源" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button type="primary" @click="onSubmit" :loading="s_loading">保存</el-button>
            <el-button @click="onSavePublish" :loading="sp_loading">保存并发布</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { list } from '@/api/example'
import { taskList,articleList,articleDetail, edit_site_article, release_site_article } from '@/api/task'
import Tinymce from "@/components/tinymce";
export default {
  components: {
    Tinymce
  },
  name: 'Recharge',
  data() {
    return {
      tableData: [],
      listOrEdit: 'list',
      link: '',
      loading: false,
      taskId: '',
      linkOption: [
      ],
      search: '',
      taskOption: [],
      status: 1,
      ruleForm: {},
      rules: {

      },
      pageInfo: {
        size: 15,
        current: 1,
        total: 1,
        orderColumn: 'ct',
        order: 'DESC'
      },
      siteArticleId: '',
      sp_loading: false,
      s_loading: false,
      oneCropping_loading: false // 一键裁剪
    }
  },
  computed: {
  },
  created() {
    this.getList()
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    getList() {
      const query = {
        search: '',
        status: '',
      }
      list(query).then(res => {
        this.linkOption = res.data.list.data
        if (this.$route.query.item) {
          this.link = Number(this.item.site_id)
        }
      })
      taskList().then(res => {
        this.taskOption = res.data.list.data
      })
    },
    editArticle(row) {
      console.log(row)
      this.listOrEdit = 'edit'
      this.siteArticleId = row.article_id
    //   const query = {
    //     top: this.ruleForm.cropping_images_top || '',
    //     bottom: this.ruleForm.cropping_images_bottom|| '',
    //     left: this.ruleForm.cropping_images_left|| '',
    //     right: this.ruleForm.cropping_images_right|| '',
    //   }
      articleDetail({articleId: row.article_id}).then(res=> {
        console.log(res)
        this.ruleForm = res.data.info
      })
    },
    // 一键裁剪
    oneCropping() {
        this.oneCropping_loading = true
        const query = {
            top: Number(this.ruleForm.cropping_images_top) || '',
            bottom: Number(this.ruleForm.cropping_images_bottom)|| '',
            left: Number(this.ruleForm.cropping_images_left) || '',
            right: Number(this.ruleForm.cropping_images_right) || '',
        }
        articleDetail({articleId: this.siteArticleId},{form: query}).then(res=> {
            console.log(res)
            this.oneCropping_loading = false
            this.ruleForm = res.data.info
        }).catch(err => {
            this.oneCropping_loading = false
        })
    },
    getArticleList() {
      this.loading = true
      const query = {
        search: this.search,
        siteId: this.link,
        taskId: this.taskId,
        page: this.pageInfo.current,
      }
      articleList(query).then(res => {
        console.log(res)
        this.loading = false
        this.tableData = res.data.list.data
        this.pageInfo.current = res.data.list.current_page
        this.pageInfo.total = res.data.list.total
      }).catch(err => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageInfo.size = val
      this.getArticleList()
    },
    handleCurrentChange(val) {
      this.pageInfo.current = val
      this.getArticleList()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
      },
    // 保存
    onSubmit() {
      this.s_loading = true
      let query = {
        form: {
          ai_title: this.ruleForm.ai_title,
          html_content: this.ruleForm.html_content
        }
      }
      edit_site_article(query,this.siteArticleId).then((res) => {
          this.$message.success(res.message)
          this.s_loading = false
        //   this.ruleForm.html_content = ''
        //   this.listOrEdit = 'list'
        //   this.getArticleList()
      }).catch(err => {
        this.s_loading = false
      })
    },
    // 保存并发布
    onSavePublish() {
        this.sp_loading = true
        let query = {
            form: {
                ai_title: this.ruleForm.ai_title,
                html_content: this.ruleForm.html_content
            }
        }
        release_site_article(query, this.siteArticleId).then((res) => {
          this.$message.success(res.message)
          this.ruleForm.html_content = ''
          this.listOrEdit = 'list'
          this.sp_loading = false
          this.getArticleList()
        }).catch(err => {
          this.sp_loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.console-recharge {
  padding: 20px;
  .pagenation {
    display: flex;
    justify-content: center;
    margin-top: 1%;
  }
}
.cropping_images{
    display: flex;
    .cropping_images_input{
        width: 150px;
        margin-right:20px;
    }
}
</style>
